<template>
	<view class="person_page">
		<cu-custom bgColor="bg-gradual-them" :isBack="true" style="z-index: 100; ">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>


		<!-- 个人资料 -->
		<view class="">

			<!-- 顶部背景 -->
			<view class='UCenter-bg'
				:style="'background-image: url(' + pic[0].link + ');margin-top:' + 0 + 'px;background-size: cover;'">

				<block>
					<view class='text-center' style="z-index: 10; ">
						<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data"
							style="overflow: hidden;">
							<!-- 照片 -->
							<image :src="userinfo.avatarUrl" mode="aspectFill" style="border-radius: 50%; 
					width: 150rpx; height: 150rpx;
					border:1px solid rgba(255, 255, 255, 0.5);">
							</image>
						</view>
						<!-- 更新资料 -->
						<view class="padding text-blue text-bold">
							<view class="text-center">
								<button class="cu-btn round bg-them" style="border:1px solid rgba(255, 255, 255, 0.7);"
									@click="myUpdate(userinfo.openid)">更新资料
								</button>
							</view>
						</view>
					</view>
				</block>

				<!-- 波浪 -->
				<view class="tnwave waveAnimation">
					<view class="waveWrapperInner bgTop">
						<view class="wave waveTop"
							style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
					</view>
					<view class="waveWrapperInner bgMiddle">
						<view class="wave waveMiddle"
							style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-2.png')"></view>
					</view>
					<view class="waveWrapperInner bgBottom">
						<view class="wave waveBottom"
							style="background-image: url('https://tnuiimage.tnkjapp.com/wave/wave-1.png')"></view>
					</view>
				</view>

			</view>



			<view class="center-box shadow">
				<view class="cu-list menu">

					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-them text-shadow">基本信息</text>
							<text class="text-ABC text-them">information</text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-profile text-them"></text>
							<text class="text-lg">昵称：{{userinfo.nickName}}</text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-vipcard text-them"></text>
							<text class="text-lg">性别：
								<text class="text-balck">未知</text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-list menu card-menu  margin-bottom-sm   text-black  sm-border center-box">

				<view class="cu-item " @click="myUpload(userinfo.openid)">
					<button class='content cu-btn'>
						<image src='../../static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>我的上传</text>
					</button>
					<view class="action">
						<view class="cu-tag round bg-them light">猫咪档案</view>
					</view>
				</view>

				<view class="cu-item" @click="myShare(userinfo.openid)">
					<button class='content cu-btn'>
						<image src='../../static/me/icon/lvhang.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>我的分享</text>
					</button>

					<view class="action">
						<view class="cu-tag round bg-green light">日常记录</view>
					</view>
				</view>

				<view class="cu-item">
					<button class='content cu-btn' open-type="contact">
						<image src='../../static/me/icon/chucuo.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>客服服务</text>
					</button>

					<view class="action">
						<view class="cu-tag round bg-red light">问题反馈</view>
					</view>
				</view>

			</view>

			<!-- 管理页面 -->
			<view class="center-box shadow" v-show="userinfo.identity ==='管理员'  ">
				<view class="cu-list menu">

					<view class="cu-bar margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-them text-shadow">管理模块</text>
							<text class="text-ABC text-them">information</text>
						</view>
					</view>

					<view class="cu-item" @click="goDailySentence(userinfo.openid)">
						<button class='content cu-btn'>
							<image src='../../static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
							<text class='text-lg margin-sm'>日常审核</text>
						</button>

						<view class="action">
							<view class="cu-tag round bg-gradual-them light">用户上传的日常记录</view>
						</view>
					</view>

					<view class="cu-item" @click="goCatSentence(userinfo.openid)">
						<button class='content cu-btn'>
							<image src='../../static/me/icon/diannao.png' class='png' mode='aspectFit'></image>
							<text class='text-lg margin-sm'>档案审核</text>
						</button>

					</view>

				</view>
			</view>

		</view>

		<view style="height: 200rpx;"></view>

		<view>
			<view class="circle">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</view>
		</view>



		<u-toast ref="uToast" />




	</view>
</template>

<script>
	import imgData from "@/common/uiImg.js";
	import {
		getUserInfo,
		getToken
	} from '@/utils/auth';
	export default {
		data() {
			return {

				pageName: '个人中心',
				// https://cdn.zhoukaiwen.com/zjx_me_bg5.jpeg

				pic: [{
					link: 'https://img.kancloud.cn/22/97/2297e4ce9e8012483202838be910ef6e_2498x1705.jpg',
					name: '幽静'
				}, ],


				userinfo: {
					nickName: '猫友',
					avatarUrl: '../../static/img/avatar.png',
					openid: null,
					identity: "",
				},


			}
		},
		onLoad() {
			this.goRegister()
			console.log("身份:", this.userinfo)
		},

		methods: {

			// 强制用户进行登陆
			goRegister() {
				let openid = getToken();
				if (openid) { // 判断是否登陆
					let userinfo = getUserInfo();
					this.userinfo = userinfo
				} else {
					//返回跳转 【记得复制页面例的组件】
					this.$refs.uToast.show({
						title: ' 请先进行登陆哟 ❤',
						type: 'warning',
						url: ''
					})
				}
			},

			// 查看我的上传 【携带用户的openid】
			myUpload(openid) {
				console.log("openid:", openid)
				//如果没有登陆就提示去登陆
				if (this.userinfo.openid == null) {
					this.$refs.uToast.show({
						title: '请先进行登陆哟 ❤',
						type: 'warning',
						url: ''
					})
				} else {
					//跳转
					uni.navigateTo({
						url: '/subPages/me/myUpload/myUpload?openid=' + openid
						// url: '/catView/cattype?id=' + id,
						// ../video?id=' + id
					});
				}

			},

			//查看我的反馈
			myShare(openid) {
				console.log("openid:", openid)
				//如果没有登陆就提示去登陆
				if (this.userinfo.openid == null) {
					this.$refs.uToast.show({
						title: '请先进行登陆哟 ❤',
						type: 'warning',
						url: ''
					})
				} else {
					//跳转
					uni.navigateTo({
						url: '/subPages/me/myShare/myShare?openid=' + openid
					});
				}
			},

			//更新资料 页面跳转
			myUpdate(openid) {
				console.log("openid:", openid)
				//如果没有登陆就提示去登陆
				if (this.userinfo.openid == null) {
					this.$refs.uToast.show({
						title: '请先进行登陆哟 ❤',
						type: 'warning',
						url: ''
					})
				} else {
					//跳转
					uni.navigateTo({
						url: '/subPages/me/myUpdate/myUpdate?openid=' + openid
					});
				}
			},

			// 管理员审核 日常
			goDailySentence(openid) {
				console.log("openid:", openid)
				//如果没有登陆就提示去登陆
				if (this.userinfo.openid == null) {
					this.$refs.uToast.show({
						title: '请先进行登陆哟 ❤',
						type: 'warning',
						url: ''
					})
				} else {
					//跳转
					uni.navigateTo({
						url: '/subPages/me/adminShare/adminShare?openid=' + openid
					});
				}
			},

			goCatSentence(openid) {
				this.$refs.uToast.show({
					title: '还未开放此功能 ❤',
					type: 'warning',
					url: ''
				})

			},


		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	/* page不能写带scope的style标签中，否则无效 */
	.person_page {
		margin: 0;
		width: 100%;

		color: #fff;
		position: relative;
		background: linear-gradient(-120deg, #5aebef, #00aaff, #ddf8ff, #55aaff);
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}


	ul li {
		position: absolute;
		border: 1px solid #fff;
		background-color: #fff;
		width: 30px;
		height: 30px;
		list-style: none;
		opacity: 0;
	}

	.circle li {
		bottom: 0;
		left: 15rpx;
		/* 执行动画 */
		animation: circle 15s linear infinite;
	}

	.circle li:nth-child(2) {
		left: 650rpx;
		/* 设置动画延迟时间 */
		animation-delay: 2s;
	}

	.circle li:nth-child(3) {
		left: 600rpx;
		/* 设置动画延迟时间 */
		animation-delay: 6s;
	}

	.circle li:nth-child(4) {
		left: 200rpx;
		/* 设置动画延迟时间 */
		animation-delay: 4s;
	}

	.circle li:nth-child(5) {
		left: 100rpx;
		/* 设置动画延迟时间 */
		animation-delay: 8s;
	}

	/* 定义动画 */


	@keyframes circle {
		0% {
			transform: scale(0) rotateY(0deg);
			opacity: 1;
			bottom: 0;
			border-radius: 0;
		}

		100% {
			transform: scale(1) rotateY(1000deg);
			opacity: 0;
			bottom: 90vh;
			border-radius: 50%;
		}
	}




	.center-box {
		color: #333333;
		width: 85%;
		background-color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 55rpx;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}


	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}


	// -----------------------------波浪
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-wave {
		background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
		width: 100vw;
		height: 100vh;
	}

	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
</style>
